<template>
<div class="Guide">
	<div class="guideBox-title">请根据您的情况从下列选择一项</div>
<div class="guideBox">
	<!--动画效果-->
<transition-group 
	appear
	name="animate__animated animate__bouns" 
	enter-active-class="animate__backInLeft" 
	leave-active-class="animate__backOutUp"
	>
<div v-for="option in guideOptions" :key="option.id" class="guideBox-item" @click="handlerGuide(option.type)">
	<img :src="option.img" style="width: 100px;margin-right: 10px;"/>
	{{option.type}}
</div>
</transition-group>

</div>
</div>
</template>

<script>
	import 'animate.css'
	export default{
		name:'Guide',
		data(){
			return {
				guideOptions:[
				{
					id:1,
					img:require("@/assets/image/guide/primary-school.png"),
					type:'小学',
				},
				{
					id:2,
					img:require("@/assets/image/guide/middle-school.png"),
					type:'中学',
				},
				{
					id:3,
					img:require("@/assets/image/guide/undergraduate.png"),
					type:'大学',
				},
				{
					id:4,
					img:require("@/assets/image/guide/commuter.png"),
					type:'在职',
				},
				
				]
			}
		},
		methods:{
			handlerGuide(val){
				this.$router.push({
					name:'roomList',
					query:{
						type:val
					}
				})
			}
		}
	}
</script>

<style>
.guideBox{
	margin: 60px 0px;
	height: 300px;
	text-align: center;
}
.guideBox-title{
	height: 120px;
	line-height: 100px;
	text-align: center;
	width: 100%;
	display: block;
	font-size: 30px;
	font-weight: bold;
	color:#1368F7
}
.guideBox-item{
	display: inline-block;
	height: 250px;
	width: 250px;
	line-height: 250px;
	border-radius: 10px;
	font-size: 40px;
	margin: 20px 60px 0 60px;
	text-align: center;
	cursor:pointer;
	color:black;
	border: 1px solid dodgerblue;
	background:rgba(183,209,237,0.3);
}
</style>